<template>

  <div class="mcont">
        
      
  

    <div class="block">
       
    <el-input placeholder="请输入标题" v-model="title" class="input-with-select">

     

    <el-button slot="append" icon="el-icon-search" @click="findother"></el-button>
  </el-input>


  
      <el-timeline>
        <el-timeline-item :timestamp="blog.created" placement="top" v-for="(blog,key) in blogs" :key=key>


             

            <router-link :to="{name:'tickmsg',params:{blogId:blog.id}}"><!-- {blogId:blog.id}/-->
          <el-card>
               <el-container>
            <el-aside width="100px">  <el-image  :src="blog.picture" :fit="fit"  class="imgsize" style="width:100%;height:auto" ></el-image>    </el-aside>
            <el-main> 
                <el-row>
              <el-col :span="24"><div class="grid-content bg-purple-dark"><p ><i v-if="blog.status==1" class="el-icon-tickets"></i>电子票</p></div></el-col>
            </el-row>
              <el-card>
             <el-row type="flex">
              <el-col :span="24"><div class="grid-content bg-purple-dark"> 
               <h4 >                
               {{blog.title}}                
            </h4></div></el-col>
            </el-row>
            <el-row>
              <el-col :span="24"><div class="grid-content bg-purple-dark"><p><i class="el-icon-map-location"></i>地址:{{blog.description}}</p></div></el-col>
            </el-row>
              <el-row>
              <el-col :span="24"><div class="grid-content bg-purple-dark"><p><i class="el-icon-date"></i>时间:{{blog.starttime}}</p></div></el-col>
            </el-row>
            
             <el-row>
              <el-col  :span="24"><div class="grid-content bg-purple-dark"><p><i class="el-icon-coin"></i>价格:{{blog.price}}</p></div></el-col>
            </el-row>
             </el-card>
              </el-main>
          </el-container>
            
          </el-card>
          </router-link>
        </el-timeline-item>
      </el-timeline>

      <el-pagination class="mpage" background layout="prev, pager, next" 
      :current-page="currentpage" 
      :page-size="pageSize" 
      :total="total"
      @current-change=page
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import Header from "../components/Header";
export default {
  name: "Blogs.vue",
  components: { Header },
  data(){
      return {
        
        
          blogs:{},
          currentpage:1,
          total:0,
          title:'',
          pageSize:5,
          input3:'',
      }
  },
  methods:{
      page(currentpage){
        

          const _this = this
          //旧写法
        //_this.$axios.get("/ticks?currentpage=" + currentpage).then(res => {
          _this.$axios.get("/newticks?currentpage=" + currentpage).then(res => {
            console.log('currentpagemessage:')
          console.log(res)
          _this.blogs = res.data.data.records
          _this.currentpage = res.data.data.current
          _this.total = res.data.data.total
          _this.pageSize = res.data.data.size
          


          })
      },
      // test(){
      //   const _this = this
      //   // console.log(JSON.parse(sessionStorage.getItem("userInfo")).id)
      //   _this.$axios.get(`/tick/buy/1/${JSON.parse(sessionStorage.getItem("userInfo")).id}`).then(res => {
      //     console.log('res',res)
      //   })
      // },
      findother(currentpage){
            const _this = this
            console.log('111111111111111111111111111'+this.title+'end')//获取输入框的信息
            ///ticksFindName/{title}
        _this.$axios.get("/ticksFindName?title="+this.title).then(res => {
            
            console.log('currentpagemessage:')
          console.log(res)
          _this.blogs = res.data.data.records
          _this.currentpage = res.data.data.current
          _this.total = res.data.data.total
          _this.pageSize = res.data.data.size
          


          })
      }
  },
  created(){
     
      console.log(this.page)
      this.page(1)
  }
};
</script>
<style scoped>
 .mpage{
     margin: 0 auto;
     text-align: center;
 }
 .el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>